<template>
  <div :data-radar-cid="cid" class="chart" />
</template>

<script>
// import 'echarts/lib/chart/radar'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'
// import 'echarts/lib/component/legend'
import { ChartMixin } from '../../../../components/mixin'
export default {
  name: 'RadarChart',
  mixins: [ChartMixin],
  props: {
    data: {
      type: [Array],
      required: true
    },
    title: {
      type: [Array],
      required: true
    }
  },
  methods: {
    setOptions() {
      this.chart.setOption({
        // backgroundColor: 'rgba(204,204,204,0.7 )',
        title: {
          text: ''
        },
        tooltip: {
          show: false
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 2,
              padding: [1, 1]
            }
          },
          indicator: this.title
        },
        series: [{
          name: '',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: this.data,
              name: '',
              areaStyle: {
                normal: {
                  color: 'rgba(255,0,0,0.6)'
                }
              }
            }
          ]
        }]
      })
    }
  }
}
</script>

<style scoped>
  .chart {
    width: 400px;
    height: 400px;
    display: inline;
    padding: 0;
    margin: 0;
  }
</style>
